<template>
    <div class="hyzq">
        <div class="memberOneWrap">
            <div class="memberHead">
                <img src="https://image.10street.cn/image/f3/ab/f3ab3ddc87460fc989cec26aed6de568.png" alt="" class="fl">
                <img src="https://image.10street.cn/image/78/ee/78eeb6b3f6e949bc3d7311bfc70349bd.png" alt="" class="fr">
            </div>
            <div class="hyzqSwiper">
                <ul>
                    <li v-for="data in viphyzq_data.itemData" :key ='data.commonId' v-on:click='todetail(data.commonId)'>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div>
                                    <img :src="data.goodsImage" alt="" class="goods-pic">
                                    <p class="goods-name">{{data.goodsName}}</p>
                                    <div class="goods-price">
                                        <p class="flp">
                                            <img src="https://api.10street.cn/wap/images/oneBuy/priceIcon.png" alt="">
                                            ￥<em>1</em>
                                        </p>
                                        <h3 class="flh">￥{{data.goodsPrice}}</h3>
                                    </div>
                                    <p class="oneName">1元购</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
          methods: {
            todetail(index){
            this.$emit('commonId',index)
        },
          },
    props:['viphyzq_data'],
    data(){
        return {
            foods : {}
        }
    },
    watch:{
        'viphyzq_data'(){

            // console.log(this.repfxhsg_data)
        }
    },
    mounted () {
        
        // console.log(1)
  
        // console.log(this.repeatstyle_data)
    }

}
</script>

<style lang='stylus'>
.hyzq
    .memberOneWrap
        height: 2.3rem;
        background: #FFE1CA;
        margin: 0 0.1rem;
        padding: 0.1rem;
        border-radius: 0.1rem;
        overflow: hidden;
        .memberHead
            height 0.36rem
            padding-bottom: 0.1rem;
            img
                height: 0.3rem;
            .fl
                float: left !important;
            .fr
                float: right !important;
        .hyzqSwiper
            margin: 0 auto;
            position relative
            overflow: hidden;
            z-index: 1;
            ul 
                display flex
                flex-wrap  nowrap
                overflow scroll
                li 
                    background #fff
                    min-width: 32%;
                    margin-right: 2%;
                    height: 1.7rem;
                    .swiper-wrapper
                        height 1.7rem
                        .swiper-slide
                            height 1.7rem
                            background: #fff;
                            border-radius: 0.1rem;
                            overflow: hidden;
                            padding-bottom: 0.1rem;
                            position relative
                            div 
                                .goods-pic
                                    width 100%
                                .goods-name 
                                    color: #333333;
                                    font-size: 0.1rem;
                                    overflow: hidden;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                .goods-price
                                    .flp
                                        float: left !important;
                                        font-size: 0.15rem;
                                        color: #FF4A42;
                                        img 
                                            width: 0.15rem;
                                        em
                                            font-size: 0.15rem;
                                            margin-right 0.1rem
                                    .flh
                                        color: #999;
                                        font-size: 0.1rem;
                                        text-decoration: line-through;
                                        margin-left: 0.15rem;
                                .oneName 
                                    position: absolute;
                                    top: 0.1rem;
                                    left: 0rem;
                                    background: linear-gradient(270deg,#FE463E 0%,#FF814B 100%);
                                    border-radius: 0.15rem;
                                    color: #fff;
                                    font-size: 0.1rem;
                                    text-align: center;
                                    height: 0.2rem;
                                    line-height: 0.2rem;
                                    width: 0.4rem;
</style>